<template>
    <div class="pad40 padB35">
        <div class="padB40 textC font26 color92">——客观真实的评价能帮助用户做决策——</div>
        <div class="commentBox">
            <div class="commentItem" v-for="(item,index) in orderDetail.details" :key="index">
                <div class="commentTop">
                    <img src="../../public/static/img/indexBg.jpg" class="photo">
                    <div class="info ell">
                        <div class="name">
                            {{item.productName}}
                        </div>
                        <!-- <div class="desc ell">
                            {{ buildDesc(item) }}
                        </div> -->
                    </div>
                </div>
                <div class="commentBottom">
                    <div class="starLevel">
                        <span class="font30 marR40">菜品评价</span>
                        <setStarNum :defaultRating.sync="item.defaultRating" />
                        <span class="starText">{{reviewText(item.defaultRating)}}</span>
                    </div>
                    <div class="commentContent marT40">
                        <textarea class="textarea" placeholder="对口是否满意？可描述问题，帮助商家改善" rows="4" v-model="item.comment" />
                        <ul class="commentPhoto">
                            <van-uploader v-model="item.fileList" :after-read="afterRead" :name="index" multiple>
                                <div class="van-uploader__upload">
                                <img src="~@/assets/uploadPhoto.png" class="photo"></div>
                            </van-uploader>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="commentItem">
                <div class="commentTop">
                    <div class="info ell">
                        <div class="name">
                            {{orderDetail.shopName}}
                        </div>
                    </div>
                </div>
                <div class="commentBottom">
                    <div class="starLevel">
                        <span class="font30 marR40">上菜速度</span>
                        <setStarNum :defaultRating.sync="sdefaultRating" />
                        <span class="starText">{{reviewText(sdefaultRating)}}</span>
                    </div>
                    <div class="starLevel">
                        <span class="font30 marR40">服务评价</span>
                        <setStarNum :defaultRating.sync="fdefaultRating" />
                        <span class="starText">{{reviewText(fdefaultRating)}}</span>
                    </div>
                    <div class="commentContent marT40">
                        <textarea class="textarea" placeholder="对口是否满意？可描述问题，帮助商家改善" rows="4" v-model="shopComment" />
                        <ul class="commentPhoto">
                            <van-uploader v-model="fileList" :after-read="afterRead2" multiple>
                                <div class="van-uploader__upload">
                                <img src="~@/assets/uploadPhoto.png" class="photo"></div>
                            </van-uploader>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="anonymousBox">
                <div class="anonymousBtn" @click="isAnonymous=!isAnonymous"><i class="check " :class="{'checkOn':isAnonymous}"></i>匿名评论</div>
            </div>
        </div>
        <div class="replaceBottomBox">
            <div class="btn cancelBtn" @click="back">返回</div>
            <div class="btn surnBtn" @click="comment">提交</div>
        </div>
    </div>
</template>
<script>
import { baseURL } from "@/api/config";
import {GetMemberOrderById} from '@/api/order'
import {GetReview,GetUpload} from '@/api/comment'
import setStarNum from "@/components/common/setStarNum.vue";
import {Toast,Uploader} from 'vant'

let reviewTextList = {
    0:'差',
    1:'较差',
    2:'还行',
    3:'一般',
    4:'满意',
    5:'非常满意'
}
export default {
    name: 'CommentItem',
    components:{
        setStarNum,
        [Uploader.name]:Uploader
    },
    props: {
        starNum: {
            // 星星的个数
            type: Number,
            default: 5,
        },
        // defaultRating: {
        //     // 默认点亮的个数
        //     type: Number,
        //     default: 4,
        // },
    },
    data(){
        return {
            baseURL,
            shopComment:'',
            selectTable: 1,
            appriseList:[],
            orderDetail: {},
            sdefaultRating:0,
            fdefaultRating:0,
            fileList: [],
            isAnonymous: true
        }
    },
    computed:{
        reviewText(){
            return function(review){
                let res 
                Object.keys(reviewTextList).forEach((i)=>{
                    if (i == review)
                    res = reviewTextList[i]
                })
                return res      
            }
            
        },
        commentPhotoList(){
            if(this.item??this.item.picList){
               return JSON.parse(this.item.picList)
            }else{
                return []
            }
        }
    },
    created(){
        this.reqGetMemberOrderById()
    },
    methods:{
        back(){
            this.$router.go(-1)
        },
        picListHandler(obj){
            let picListArr = []
            obj.forEach((i)=>{
                picListArr.push({
                    url:i.url
                })
            })
            return JSON.stringify(picListArr)//.join(',')
        },
        async comment(){
            let detailList = []
            this.orderDetail.details.forEach((i)=>{
                detailList.push({
                    detailId: i.detailId,
                    review: i.defaultRating,
                    comment: i.comment,
                    isAnonymous: this.isAnonymous,
                    picList: this.picListHandler(i.fileList)
                })
            })
            console.log(detailList)
            let params = {
                orderId: this.$route.query.orderId,
                speed: this.sdefaultRating,
                service: this.fdefaultRating,
                comment: this.shopComment,
                picList: this.picListHandler(this.fileList),
                isAnonymous: true,
                detailList: detailList
            }
            let { returnCode, isSuccess,message }  = await GetReview(params)
            if(isSuccess == false) {
                Toast(message);
                return
            }
            if(returnCode!=0){
                Toast('没有该订单');
            }else{
                this.$router.push({path:'/submitSuccess'})
            }
        },
        async afterRead(file,objIdx) {
            // 此时可以自行将文件上传至服务器
            console.log(objIdx);
            let params = new FormData()
            params.append('file', file.file)
            let { returnCode,returnData, isSuccess }  = await GetUpload(0,params)
            if(isSuccess == false) return
            if(returnCode!=0){
                Toast('上传失败');
            }else{
                this.orderDetail.details.forEach((i,idx)=>{
                    if(idx==objIdx.name){
                        i.fileList[i.fileList.length - 1].url = baseURL+returnData
                    }
                    console.log(i)
                })
                //this.item.name.fileList.push(returnData)
            }
        },
        async afterRead2(file) {
            // 此时可以自行将文件上传至服务器
            let params = new FormData()
            params.append('file', file.file)
            let { returnCode,returnData, isSuccess }  = await GetUpload(0,params)
            if(isSuccess == false) return
            if(returnCode!=0){
                Toast('上传失败');
            }else{
                this.fileList[this.fileList.length - 1].url = baseURL+returnData
                //this.item.name.fileList.push(returnData)
            }
        },
        setsRating(index){
            this.sdefaultRating = index + 1
        },
        async reqGetMemberOrderById(){
            let that = this
            let params = {
                id: this.$route.query.orderId
            }
            let { returnCode,returnData, isSuccess }  = await GetMemberOrderById(params)
            if(isSuccess == false) return
            if(returnCode!=0){
                Toast('没有该订单');
                Toast.setDefaultOptions({onClose: ()=>{
                    that.$router.go(-1)
                } });
                
            }else{
                this.orderDetail = returnData
                this.orderDetail.details.forEach((i)=>{
                    this.$set(i,'defaultRating',0)
                    this.$set(i,'comment',"")
                    this.$set(i,'fileList',[])
                })
            }
        },
        /**
         * @description 描述
         */
        buildDesc(item) {
            let str = "";
            let { type } = item;
            if (type == 3) {
                if (item.packages.length == 0) return str;
                let arr = [];
                for (let sitem of item.packages) {
                arr.push(`${sitem.productName}x${sitem.qty}`);
                // for (let ssitem of sitem.items) {
                //   ssitem.itemCount > 0 &&
                //     arr.push(`${ssitem.productName}x${ssitem.itemCount}`);
                // }
                }
                str = arr.join("+");
            } else if (type == 5) {
                if (item.foodGroups.length == 0) return str;
                let arr = [];
                item.foodGroups.forEach((sitem) => {
                // sitem.items.forEach((ssitem) => {
                //   ssitem.isDefault == true && arr.push(`${ssitem.itemTitle}`);
                // });
                arr.push(`${sitem.itemTitle}`);
                });
                str = arr.join("+");
            } else {
                str = item.model;
            }
            return str;
        },
    }
}
</script>
<style>
    body{
        background-color: #f0f0f0;
    }
</style>
<style lang="scss" scoped>
    .commentBox{
        .commentItem{
            background-color: #fff;
            padding: 5.3%;
            border-radius: 0.3rem;
            margin-bottom: 5.3%;
            .commentTop{
                display: flex;
                align-items: center;
                .photo{ display: block; width: 2.5rem; height: 2.5rem; overflow: hidden; border-radius: 0.3rem; object-fit: cover; margin-right: 0.5rem;}
                .info{ flex: 1; display: block;
                    .name{ font-size: 0.75rem;}
                    .desc{ color: #929292; line-height: 2; font-size: 0.6rem; }
                }
            }
            .commentBottom{
                display: block;
                .starLevel{
                    padding-top: 0.5rem;
                    display: flex;
                    //justify-content: space-between;
                    align-items: center;
                    .starBox{
                        display: flex;
                        align-items: center;
                        .statIcon{
                            display: block;
                            width: 1rem;
                            height: 1rem;
                            margin-right: 0.5rem;
                            background: url(~@/assets/unselectStar.png) no-repeat;
                            background-size: cover;
                            &.on{
                                background: url(~@/assets/selectStar.png) no-repeat;
                                background-size: cover;
                            }
                        }
                    }
                    .starText{
                        margin-left: 0.5rem;
                        font-size: 0.5rem;
                        color: #929292;
                    }
                }
                .commentContent{
                    padding: 0.5rem;
                    border-radius: 0.3rem;
                    font-size: 0.6rem;
                    line-height: 1.5;
                    background-color: #f0f0f0;
                    .textarea{ background-color: transparent; width: 100%; resize: none; border: none; outline: none;}
                    .commentPhoto{
                        padding-top: 0.5rem;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        flex-wrap: wrap;
                        li{
                            position: relative;
                            width: 31%;
                            height: 0;
                            padding-top: 31%;
                            margin-bottom: 3.5%;
                            border-radius: 0.3rem;
                            overflow: hidden;
                            .photo{
                                display: block;
                                position: absolute;
                                left: 0;
                                top: 0;
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }
                        .photo{
                            display: block;
                            position: absolute;
                            left: 0;
                            top: 0;
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                }
            }
        }
        .anonymousBox{
            display: flex;
            justify-content: flex-end;
            .anonymousBtn{
                position: relative;
                font-size: 0.7rem;
                padding-left: 1.5rem;
                color: #929292;
                .check{ position: absolute; left: 2.4%; top: 50%; display: block; margin-top: -0.51rem; width: 1.02rem; height: 1.02rem; background: url(~@/assets/anonymousIcon_r.png) no-repeat; background-size: contain;
                    &.checkOn{ background: url(~@/assets/anonymousIcon.png) no-repeat; background-size: contain;}
                }
            }
        }
    }
    .replaceBottomBox{ position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; height: 2.75rem; line-height: 2.75rem; overflow: hidden; font-size: 0.7rem; background-color: #fff;
        .btn{ height: 2rem; line-height: 2rem; border-radius: 0.5rem; margin: 0 0.75rem;}
        .cancelBtn{ flex: 1; text-align: center; color: #333; margin-right: 0.375rem; border: 1px solid #333;}
        .surnBtn{ flex: 1; text-align: center; color: #333; margin-left: 0.375rem; background-image: linear-gradient(to right,$mainColor,#ffae44);}
    }
</style>